<template>
    <div class="exam-list-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>试卷列表</span>
        </div>

        <!-- 搜索区域 -->
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="试卷名称">
            <el-input v-model="searchForm.name" placeholder="请输入试卷名称"></el-input>
          </el-form-item>
          <el-form-item label="试卷状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="草稿" value="draft"></el-option>
              <el-option label="已发布" value="published"></el-option>
              <el-option label="已归档" value="archived"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
  
        <!-- 试卷表格 -->
        <el-table :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="id" label="ID" width="80"></el-table-column>
          <el-table-column prop="name" label="试卷名称"></el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="150"></el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="150"></el-table-column>
          <el-table-column prop="totalScore" label="总分" width="100"></el-table-column>
          <el-table-column prop="timeLimit" label="考试时长(分钟)" width="150"></el-table-column>
          <el-table-column prop="status" label="状态" width="120">
            <template slot-scope="scope">
              <el-tag :type="statusTypeMap[scope.row.status]">
                {{ statusTextMap[scope.row.status] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="qCount" label="题目数量" width="120"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="handleAsk(scope.row.id)">答题</el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          class="pagination"
        ></el-pagination>
      </el-card>
    </div>
  </template>
  
  <script>
  import { fetchExamList} from '@/api/study-ask'
  
  export default {
    name: 'ExamList',
    data() {
      return {
        loading: false,
        searchForm: {
          name: '',
          status: ''
        },
        tableData: [],
        statusTextMap: {
          draft: '草稿',
          published: '已发布',
          archived: '已归档'
        },
        statusTypeMap: {
          draft: 'warning',
          published: 'success',
          archived: 'info'
        },
        pagination: {
          current: 1,
          size: 10,
          total: 0
        }
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      // 获取试卷列表
      fetchData() {
        this.loading = true
        const params = {
          ...this.searchForm,
          page: this.pagination.current,
          size: this.pagination.size
        }
        
        fetchExamList(params).then(response => {
          console.log(response);
          this.tableData = response.data.items
          this.pagination.total = response.data.total
        }).catch(error => {
          console.error('获取试卷列表失败:', error)
          this.$message.error('获取试卷列表失败')
        }).finally(() => {
          this.loading = false
        })
      },
      
      // 搜索
      handleSearch() {
        this.pagination.current = 1
        this.fetchData()
      },
      
      // 重置搜索
      resetSearch() {
        this.searchForm = {
          name: '',
          status: ''
        }
        this.handleSearch()
      },
      
      // 分页大小变化
      handleSizeChange(size) {
        this.pagination.size = size
        this.fetchData()
      },
      
      // 当前页变化
      handleCurrentChange(current) {
        this.pagination.current = current
        this.fetchData()
      },
            
      // 答题
      handleAsk(id) {
        this.$confirm('确认开始答题吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push(`/study/ask/edit/${id}`)
        }).catch(() => {
          this.$message.info('已取消答题')
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .exam-list-container {
    padding: 20px;
  }
  
  .search-form {
    margin-bottom: 20px;
  }
  
  .pagination {
    margin-top: 20px;
    text-align: right;
  }
  </style>